<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	  
	<link rel="stylesheet" href="css/style.css" />
	  
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	  
	<script type="text/javascript">
	
		$(document).ready(function(){
			
			$('#gallery').hover(
			
			function(){	
				$(this).stop().animate({
					opacity: '1'
				}, 500);
			},
			function(){
				$(this).stop().animate({
					opacity: '0.1'
				}, 500);
			}
			);
			
			
			$('#gallery a').click(function(evt){
				
				evt.preventDefault();
				
				var imgPath = $(this).attr('href');
				var oldImage = $('#photo img');
				var newImage = $('<img src="' + imgPath + '" />');
				
				newImage.hide();
				
				$('#photo').prepend(newImage);
				newImage.fadeIn(1500);
				
				oldImage.fadeOut(1000, function(){
					$(this).remove();
				});
				
			});
			
			$('#gallery a:first').click();
			
		});
	
	
	
	</script>




</head>

<body>



	<div id="photo"></div>


	<div id="gallery"> 
        <a href="images/large/slide1.jpg"><img src="images/small/slide1.jpg" width="200" height="120" alt=""></a> 
        <a href="images/large/slide2.jpg"><img src="images/small/slide2.jpg" width="200" height="120" alt=""></a> 
        <a href="images/large/slide3.jpg"><img src="images/small/slide3.jpg" width="200" height="120" alt=""></a> 
        <a href="images/large/slide4.jpg"><img src="images/small/slide4.jpg" width="200" height="120" alt=""></a> 
        <a href="images/large/slide5.jpg"><img src="images/small/slide5.jpg" width="200" height="120" alt=""></a> 
	</div>




</body>
</html>
